<!DOCTYPE html>
<!--声明当前页面为中文-->
<html lang='zh'>
  <head>
    <meta charset='utf-8'>
    <!--link声明css调用外部样式地址-->
    <link rel='stylesheet' type='text/css' href='login.css'>
    <title>HTML 练习</title>
    <!--设定基础url,_blank定义链接在新空白页打开-->
    <!--<base href='https://static.runoob.com/images/mix/' target='_blank'>-->
    <!--使用css内部样式定义各个元素样式，-->
    <style type='text/css'>
      body{font-family:楷体}
      .part1{color:cyan}
      .part2{color:green}
      .part3{color:HotPink}
      .part4{color:#ADFF2F}
      .part5{color:blue}
      .part6{color:LightGreen}
      .part7{color:#00FF7F ;text-align:right}
      <!--margin:10px,10px,10px,10px上下左右 margin:10px,10px 上下，左右-->
    </style>
    <script></script>
  </head>
  <body>
    <!--div定义一块区域，便于对该组合区域进行独立渲染-->
    <div class='part1' id="text">
      <!--直接在元素中定义，为css内联样式-->
    	<h1 style='text-align:center; color:red'>
      	HTML 练习
    	</h1>
      <h2>
        第一部分 文本
      </h2>
      <p>
        环境安装：&#128516;<br>版本介绍：<br>
        <!--b加粗，span对文本指定部分格式化-->
        IDE工具：<b>使用</b><span style='color:blue'>vs code</span>
      </p>
      <p>
        <!--meter设定元素取值范围-->
        编写进度：<meter value='50' min='0' max='100'>50 out of 100</meter>
      </p>
      <p>
        <!--a标签定义一个链接-->
        可以查询<a href='https://www.baidu.com'>百度</a>
      </p>
    </div>
    <hr>
    <div class='part2' id="table">
      <h2>
        第二部分 表格
      </h2>
      <!--border设定表格边框，不加则不显示边框-->
      <table border='2'>
        <!--caption设定表格标题-->
        <caption>表格练习</caption>
        <!--tr定义行,th定义表格表头,td定义单元格-->
        <tr>
          <th>name</th>
          <th>age</th>
          <th>class</th>
          <th>gender</th>
          <th>score</th>
        </tr>
        <tr>
          <td>小白</td>
          <td>18</td>
          <td>三年级</td>
        </tr>
      </table>
    </div>
    <hr>
    <div class='part3' id='picture'>
      <h2>
        第三部分 图像
      </h2>
      <!--picture可以引用零个或多个source和一个img，source匹配不同设备，如果没有匹配到就使用img中的url-->
      <picture >
        <source media='(min-width:600px)' srcset='https://static.runoob.com/images/mix/html-css-js.png'>
        <source media='(min-width:450px)' srcset='https://static.runoob.com/images/mix/htmlbig.png'>
        <img src='https://static.runoob.com/images/mix/img_avatar.png' style='width:auto;' alt='这是图像'>
      </picture>
    </div>
    <hr>
    <div class='part4' id='audio/video'>
      <h2>
        第四部分 音视频
      </h2>
      <!--定义音频，controls则出现播放/停止按钮-->
      <audio controls>
        <source src='horse.ogg' type='audio/ogg'>
        <source src='See_You_Again.mp3' type="audio/mpeg">
        您的浏览器不支持音频
      </audio><br>
      <video controls width='320' height='240'>
        <source src="perfect_world.mp4"  type="video/mp4">
        <source src="movie.ogg"  type="video/ogg">
        您的浏览器不支持视频
      </video>
    </div>
    <hr>
	<div class='part5' id='form'>
      <h2>
        第五部分 form表单
      </h2>
      <div class='login'>
        <form action='login.py' method='get' autofocus target='_blank'>
          <div class='input'>
            <input type='text' name='username'placeholder='username' required><br>
            <input type='password' name='pd' placeholder='password' required><br>
            <input type='email' name='em' placeholder='email'><br>
            <input type='submit' name='登录' value='login'><br>

          </div>
      <div class='forget' style='text/css'>
        <button type='button'>
           注册
        </button>
        <button type='button'>
            忘记密码
        </button>

    </div>

         </form>

       </div>

	</div>
	<hr>
	<div class='part6' id='iframe' >
      <h2>
        第六部分 框架
      </h2>
      <!--嵌套一个html页面-->
      <iframe src="https://www.runoob.com/" width="80%" height='800'>
        this is html page
      </iframe>
	</div>
	<hr>
    <div class='part7' id='date'>
        <!--pre预格式化文本可直接显示空格，空行；time定义一个时间-->
        <pre>创建时间:  <time>2023-05-04 17:00</time>

             创建人:xxxx         xxxxx
        </pre>
    </div>
  </body>
</html>